<template>
  <page-frame>
    <div class="retreat-main">
      <div class="toptitle">
        <div class="left">会员退住-退住审核</div>
        <div class="right">
          <div class="btns">
            <el-button  @click="nextStep">下一步</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="retreatProcess02">
        <div class="step-show" @click="showStep">
          <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
          <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
          {{show}}
        </div>
        <div class="steptar" v-show="isShowStep">
          <stepRetreat :stepData="stepData"></stepRetreat>
        </div>
        <div class="retreat-content">
          <div class="panel plan">
            <div class="panel-title">会员退住- 审核详情</div>
            <div class="panel-content plan-meal">
              <div class="info">
                <el-row>
                  <el-col :span="4">
                    <div>会员姓名:<span>{{memberDTO.memberName}}</span></div>
                  </el-col>
                  <el-col :span="6">
                    <div>会员编号:<span>{{memberDTO.memberNo}}</span></div>
                  </el-col>
                  <el-col :span="9">
                    <div>身份证号:<span>{{memberDTO.cardno}}</span></div>
                  </el-col>
                  <el-col :span="3">
                    <div>账户余额:<span>{{accountDTO.balance}}元</span></div>
                  </el-col>
                </el-row>
                <!--<el-row>-->
                <!--<el-col :span="10">-->
                <!--<div>身份证号:<span>610827189878989922</span></div>-->
                <!--</el-col>-->
                <!--</el-row>-->
              </div>
              <div class="card">
                <el-row>
                  <el-table
                    :data="informationExpenseItem"
                    border
                    style="width: 100%;margin-bottom:0px;">
                    <el-table-column
                      prop="itemName"
                      label="费用项目"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="费用标准（元/月）">
                    </el-table-column>
                    <el-table-column
                      prop="paidAmount"
                      label="退款（元）">
                    </el-table-column>
                    <el-table-column
                      prop="remarks"
                      label="备注">
                    </el-table-column>
                  </el-table>
                </el-row>
              </div>
              <div class="info">
                <el-row>
                  <el-col :span="4"><div class="lInfro">应退总金额:<span>{{informationBill.receivable}}元</span></div></el-col>
                  <el-col :span="4"><div class="lInfro">缴费状况:<span>{{informationBill.status}}</span></div></el-col>
                  <el-col :span="4"><div class="lInfro">财务人员:<span>{{informationBill.emName}}</span></div></el-col>
                  <el-col :span="8"><div class="lInfro">收款时间:<span>{{informationBill.payTime}}</span></div></el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="panel plan">
            <div class="panel-title">会员退住 - 审核结果</div>
            <div class="panel-content plan-meal">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="line-height: 36px;">审批进行中</span>
                </div>
                <div class="" v-for="data in approvalTableData">
                  <el-row>
                    <el-col style="padding-left:10px;margin:10px 0;">{{data.sortName}}</el-col>
                  </el-row>
                  <div class="member-process-approval-item">
                    <el-row>
                      <el-col :span="6">
                        <span>申请时间:</span>
                        <span v-model="data.applicationTime">{{data.applicationTime}}</span>
                      </el-col>
                      <el-col :span="6">
                        <span>审核时间:</span>
                        <span v-model="data.approvalTime">{{data.approvalTime}}</span>
                      </el-col>
                      <el-col :span="4">
                        <span>审核人:</span>
                        <span v-model="data.approverName">{{data.approverName}}</span>
                      </el-col>
                      <el-col :span="2">
                        <span v-model="data.approvalWayName">{{data.approvalWayName}}</span>
                      </el-col>
                      <el-col :span="5">
                        <span>审核结果:</span>
                        <span v-model="data.result">{{data.result}}</span>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepRetreat from '../../components/stepbar/retreat.vue';
  import financeActApi from '../../service/finance/financeActApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        this.informationAudit();
        this.getCheckInApprovalResult();
      },
      /**
       * 获取退住审核详情
       */
      informationAudit(){
        let self = this;
        financeActApi.getAccountBillByAct(self.currentMemberObj.memberId,self.currentMemberObj.actId).then(function (response) {
          self.informationExpenseItem = response.body.data.accountExpenseItemDTOList ;
          self.informationBill = response.body.data.accountBillDTO ;
          self.memberDTO=response.body.data.memberDTO ;
          self.accountDTO=response.body.data.accountDTO ;
          //备注
          for(let i=0;i<self.informationExpenseItem.length;i++){
            if(self.informationExpenseItem[i].typeName=='押金'){
              self.informationExpenseItem[i].remarks = '';
            }else{
              self.informationExpenseItem[i].remarks = commonJs.formateDateToTime(self.informationExpenseItem[i].changeDate)
                +'-'+commonJs.formateDateToTime(self.informationExpenseItem[i].dueDate)
                +'('+self.informationExpenseItem[i].typeName+')';
            }
          }
          if(self.informationBill.status==1){
            self.informationBill.status="已缴费";
          }else{
            self.informationBill.status="未缴费";
          }
        })
      },
      /**
       * 获取会员退住审核结果
       */
      getCheckInApprovalResult(){
        let self = this;
        commonApi.getApprovalResult(self.currentMemberObj.actId).then(
          (response)=>{
            self.approvalTableData = response.data.data ;
          }
        );
      },
      nextStep(){
        let self = this;
        commonApi.getFlowRouter("outApply",self.currentMemberObj.actId,"").then(
          (response)=>{
             if(response.data.status!=200){
                this.$message({
                  type: 'error',
                  message: response.data.data.message
                });
             }else{
                  this.$router.push({name:"retreatProcess03"});
             }
          }
        );
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
    },
    mounted: function () {
      this.init();
    },
    components:{
      stepRetreat
    },
    data() {
      return {
        stepData:2,
        currentMemberObj:{},
        approvalTableData:[{
          createTime:"2016-10-01",
          endTime:"2016-10-02",
          assigneeName:"沙瑞金",
          status: 0,
          results:"已审批，审批通过",
        },{
          createTime:"2016-10-02",
          endTime:"2016-10-03",
          assigneeName:"瑞金",
          status: 1,
          results:"待审批",
        }],
        informationExpenseItem:[],
        informationBill:{},
        memberDTO:{},
        accountDTO:{},
        isShowStep:false,
        show:"显示流程图",
      }
    },

  }
</script>
<style>
  .retreatProcess02{

  }
  .retreatProcess02 .el-card__header{
    padding: 3px 20px;
  }
  .retreatProcess02 .info{
    margin-bottom:10px;
    font-size:13px;
  }
  .retreatProcess02 .card{
    margin-bottom:10px;
  }
  .retreatProcess02 .retreat-content{

  }
  .retreatProcess02 .retreat-content .bar{
    margin-bottom:18px;
    margin-top: 50px;
  }
  .retreatProcess02 .el-table{
    width: 90%!important;
  }
</style>


